<template>
  <el-container class="main_con">
    <div class="filter_con ds_block" style="margin-bottom:20px">
      <div class="filter_head flex_div">
        <h2>会员权益列表</h2>
        <el-button type="primary" @click="showAdd">新建会员权益</el-button>
      </div>
    </div>
    <div class="filter_con  list_con nopt" style="padding-top: 10px;">
      <div style="width:100%">
        <el-table :data="dataList" style="width: 100%" class="mt_15">
          <el-table-column prop="title" label="名称"></el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <vimage style="width: 50px;height: 50px;" :src="scope.row.image" ></vimage>
            </template>
          </el-table-column>
          <el-table-column prop="text" label="说明"></el-table-column>
          <el-table-column prop="status" label="状态" width="180">
            <template slot-scope="scope">
              <span v-if="scope.row.is_open == 1">启用</span>
              <span v-if="scope.row.is_open == 0">禁用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="text" @click="editStatus(scope.row.id)">{{ scope.row.is_open == 0 ? '启用' : '禁用' }}</el-button>
              <el-button type="text" @click="editData(scope.row.id)">修改</el-button>
              <el-button type="text" @click="deleteData(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="table_footer">
        <el-pagination @current-change="changePage" :current-page="page" class="pages" background layout="prev, pager, next" :total="total" hide-on-single-page></el-pagination>
      </div>
    </div>
    <el-dialog title="新建会员权益" top="80px" :visible.sync="addDialog" :before-close="handleClose" :width="form.is_present_coupon == 1 ? '1260px' : '980px'">
      <el-form size="medium" ref="form" :model="form" :rules="formRules" label-width="140px" class="form">
        <el-form-item label="名称"><el-input v-model="form.title"></el-input></el-form-item>
        <el-form-item label="图标">
          <div class="icon_box"><Upload :tempUrl="form.image" @input="getImage"></Upload></div>
        </el-form-item>
        <el-form-item label="说明"><el-input v-model="form.text"></el-input></el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="Addrights">提 交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="选择优惠券" :visible.sync="showSelectCon" width="50%" append-to-body>
      <SelectConpon :limit='3'  :key="rke" :data="selectCon" @outData="closeCon"></SelectConpon>
    </el-dialog>
  </el-container>
</template>

<script>
import {addcontent, contentlist, deletecontent, getcontent, editcontent} from '@/api/mall/vipuser';
import SelectConpon from '@/components/SelectConpon/index';
import draggable from 'vuedraggable';
import Upload from '@/components/Upload/SingleImage2';
import Linkdiv from '@/components/Link/index';
export default {
  data() {
    return {
      obj: {
        name: '',
        level: '',
        title: '',
        status: -1
      },
      options: [
        {
          value: -1,
          label: '全部'
        },
        {
          value: 0,
          label: '禁用'
        },
        {
          value: 1,
          label: '启用'
        }
      ],
      objTemp: {},
      page: 1,
      size: 10,
      total: 0,
      dataList: [],
      form: {
        title: '',
        text: '',
        image: '',
        is_open:1
      },
      formRules: {
        name: [{required: true, message: '请输入名称', trigger: 'blur'}, {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}],
        level: [
          {required: true, message: '请输入等级', trigger: 'blur'},
          {
            pattern: /^(1|[1-9]\d?|100)$/,
            message: '范围在1-100',
            trigger: 'blur'
          }
        ]
      },
      addDialog: false,
      showSelectCon: false,
      rke: 0,
      selectCon: []
    };
  },
  components: {
    SelectConpon,
    draggable,
    Upload,
    Linkdiv
  },
  created() {
    this.searchData();
  },
  methods: {
    // 获取列表
    getData() {
      let data = {
        ...this.objTemp
      };
      data.page = this.page;
      data.size = this.size;
      contentlist(data).then(res => {
        let data = res.msg.data;
        this.dataList = data;
        this.total = res.msg.total;
      });
    },
    // 查询
    searchData() {
      this.objTemp = Object.assign({}, this.obj);
      //处理过滤status字段
      if (this.objTemp.status == -1) {
        delete this.objTemp.status;
      }
      this.getData();
    },
    // 添加 || 修改
    Addrights() {
      let _this = this;
      this.$refs['form'].validate(valid => {
        if (valid) {
          let data = _this.form;
          if (!data.update_time) {
            addcontent(data).then(res => {
              _this.searchData();
              _this.addDialog = false;
            });
          } else {
            editcontent(data).then(res => {
              _this.searchData();
              _this.addDialog = false;
            });
          }
        }
      });
    },
    // 删除
    deleteData(id) {
      let data = {id};
      deletecontent(data).then(res => {
        this.searchData();
      });
    },
    // 取消
    cancel() {
      this.handleClose();
    },
    editStatus(id) {

      let data = {id};
      data.n_load=1
      getcontent(data).then(res => {
        let data = res.msg;
        delete data.status_text;
        data.is_open == 1 ? (data.is_open = 0) : (data.is_open = 1);
         data.n_load=1
        editcontent(data).then(res => {
          this.searchData();
        });
      });
    },
    editData(id) {
      let data = {id};
      getcontent(data).then(res => {
        let data = res.msg;
        this.form = data;
        this.addDialog = true;
      });
    },
    //关闭选择优惠券框
    closeCon(data) {
      this.showSelectCon = false;
	  if(data){
		 this.form.present_coupon = [];
		 data.forEach(a => {
		   this.form.present_coupon.push({
		     conditions: a.conditions,
		     name: a.name,
		     id: a.id,
		     denomination: a.denomination,
		     total_limit: a.total_limit
		   });
		 }); 
	  }

      // this.form.present_coupon = data;
    },
    handleClose() {
      this.addDialog = false;
      this.$refs['form'].resetFields();
    },
    showAdd() {
      this.addDialog = true;
    },
    changePage(page) {
      this.page = page;
      this.searchData();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    addlist() {
      let b = (this.form.content.length % 5) + 1;
      this.form.content.push({
        icon: window.location.origin + '/static/images/btns' + b + '.png',
        linkdata: {
          name: '',
          id: '',
          type: ''
        },
        text: '按钮文字' + (this.form.content.length + 1)
      });
    },
    dellist(i) {
      this.form.content.splice(i, 1);
    },
    selectlink(item, i) {
      this.acivedata = item;
      this.activid = i;
      this.$parent.showlinkselcet(item);
    },
    //获取图片
    getImage(data) {
      this.form.image = data;
    }
  }
};
</script>

<style lang="scss" scoped>
.filter_head {
  h2 {
    margin: 10px 0;
  }
}
.flex_div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form {
  // display: flex;
  .form_content {
    margin-left: 100px;
  }
  .icon_box {
    width: 100px;
    height: 100px;
  }
  .form_content:first-child {
    margin-left: 20px;
  }
  .el-input {
    width: 250px;
  }
}
.container {
  width: 320px;
  display: flex;
  border: 1px solid #e9edef;
  background: #f4f6f8;
  padding: 10px;
  margin-bottom: 20px;
  position: relative;
  line-height: 35px;
  .el-input {
    width: 180px;
  }
  .icon_box {
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
    //border: 1px solid #dcdfe6;
    position: relative;

    .icon-abl-close {
      position: absolute;
      top: -6px;
      right: -9px;
      color: rgba(0, 0, 0, 0.3);
      font-size: 16px;
    }

    &:hover {
      .choose_bar {
        display: block;
      }
    }

    .choose_bar {
      display: none;
      position: absolute;
      bottom: 0;
      left: 0;
      font-size: 10px;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      line-height: 18px;
      text-align: center;
      width: 100%;

      i.txt {
        display: inline-block;
        font-style: normal;
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
        letter-spacing: 2px;
      }
    }
  }
}
.info {
  display: flex;
  flex-direction: column;
  div {
    span:first-child {
      font-weight: bold;
      color: #333;
    }
  }
}
</style>
